@use "sass:map";

@mixin button-variant(
    $background,
    $border,
    $color: color-contrast($background),
    $hover-background: if($color == $color-contrast-dark, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
    $hover-border: if($color == $color-contrast-dark, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
    $hover-color: color-contrast($hover-background),
    $active-background: if($color == $color-contrast-dark, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
    $active-border: if($color == $color-contrast-dark, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
    $active-color: color-contrast($active-background),
    $disabled-background: $background,
    $disabled-border: $border,
    $disabled-color: $btn-disabled-color,
    $text-color: if($color == $color-contrast-light, shade-color($background, $btn-color-shade-amount), tint-color($background, $btn-color-tint-amount))
) {
    $real-background: if($color == $color-contrast-dark, shade-color($background, $btn-bg-shade-amount), tint-color($background, $btn-bg-tint-amount));
    $real-color: if($color == $color-contrast-light, shade-color($background, $btn-color-shade-amount), tint-color($background, $btn-color-tint-amount));
    --#{$prefix}btn-color: #{$real-color};
    --#{$prefix}btn-bg: #{$real-background};
    --#{$prefix}btn-border-color: #{if($color == $color-contrast-dark, shade-color($background, $btn-border-shade-amount), tint-color($background, $btn-border-tint-amount))};
    --#{$prefix}btn-hover-color: #{$hover-color};
    --#{$prefix}btn-hover-bg: #{$hover-background};
    --#{$prefix}btn-hover-border-color: #{$hover-border};
    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
    --#{$prefix}btn-active-color: #{$active-color};
    --#{$prefix}btn-active-bg: #{$active-background};
    --#{$prefix}btn-active-border-color: #{$active-border};
    --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
    --#{$prefix}btn-disabled-color: #{$disabled-color};
    --#{$prefix}btn-disabled-bg: #{$real-background};
}

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
// @import "bootstrap/scss/nav";
// @import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
// @import "bootstrap/scss/accordion";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
// @import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
// @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
// @import "bootstrap/scss/offcanvas";
// @import "bootstrap/scss/placeholders";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

$font-family-os: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;


#app {
    display: block;
    -webkit-font-smoothing: antialiased;
}

.page-summary-bar {
    display: flex;
    align-items: center;
    margin: 0.25rem 0 1.5rem;

    h1 {
        font-family: 'Poppins';
        font-weight: 700;
        font-size: 2.5rem;
        margin: 0;
    }

    .counter {
        display: inline-block;
        padding: 0px 10px;
        background: var(--bs-body-color);
        color: var(--bs-body-bg);
        border-radius: 5px;
    }
}

// .alert {
//     border-top-style: none;
//     border-bottom-style: none;
//     border-right-style: none;
//     border-left-width: 2px;
//     font-style: italic;
//     background: rgba(0,0,0,.25) !important;
//     padding: 0.7rem 1rem;
//     margin: 1rem 0;
// }

footer {
    display: flex;
    align-items: center;
    padding: .5rem 0;
    margin: 2rem 0 1rem;
    border-top: 1px solid rgba($body-color, .2);
}

input:-webkit-autofill {
    -webkit-background-clip: text;
    -webkit-box-shadow: 0 0 0 50px $input-bg inset;
    -webkit-text-fill-color: $input-color;
}

input:-webkit-autofill:focus {
    -webkit-background-clip: text;
    -webkit-box-shadow: 0 0 0 50px $input-focus-bg inset;
    -webkit-text-fill-color: $input-focus-color;
}

.badge {
    font-family: $font-family-os;
}

.btn {
    text-decoration: underline;
    text-decoration-color: var(--#{$prefix}btn-active-bg);
}

.page-item.active .page-link {
    text-decoration: underline;
}

// Fix placeholder text with floating FormGroup labels
.form-floating>.form-control::placeholder {
    color: revert;
}

.form-floating>.form-control:not(:focus)::placeholder {
    color: transparent;
}

@include media-breakpoint-up(md) {
    .narrow-page {
        width: map.get($grid-breakpoints, "md");
    }
}

a {
    text-decoration-color: var(--wg-link-underline-color);
    text-underline-offset: 2px;

    &:hover, &.active {
        text-decoration-color: var(--wg-link-hover-underline-color);
    }
}


// Make these vars reusable from everywhere
body {
    --bs-list-group-color: #{$list-group-color};
    --bs-list-group-bg: #{$list-group-bg};
    --bs-list-group-border-color: #{$list-group-border-color};
    --bs-list-group-border-width: #{$list-group-border-width};
    --bs-list-group-border-radius: #{$list-group-border-radius};
    --bs-list-group-item-padding-x: #{$list-group-item-padding-x};
    --bs-list-group-item-padding-y: #{$list-group-item-padding-y};
    --bs-list-group-action-color: #{$list-group-action-color};
    --bs-list-group-action-hover-color: #{$list-group-action-hover-color};
    --bs-list-group-action-hover-bg: #{$list-group-hover-bg};
    --bs-list-group-action-active-color: #{$list-group-action-active-color};
    --bs-list-group-action-active-bg: #{$list-group-action-active-bg};
    --bs-list-group-disabled-color: #{$list-group-disabled-color};
    --bs-list-group-disabled-bg: #{$list-group-disabled-bg};
    --bs-list-group-active-color: #{$list-group-active-color};
    --bs-list-group-active-bg: #{$list-group-active-bg};
    --bs-list-group-active-border-color: #{$list-group-active-border-color};

    --wg-link-underline-color: #{$link-underline-color};
    --wg-link-hover-underline-color: #{$link-hover-underline-color};
}

@each $theme-color, $value in $theme-colors {
    .text-bg-#{$theme-color} {
        $color: color-contrast($value);
        $real-background: if($color == $color-contrast-dark, shade-color($value, $btn-bg-shade-amount), tint-color($value, $btn-bg-tint-amount));
        $real-color: if($color == $color-contrast-light, shade-color($value, $btn-color-shade-amount), tint-color($value, $btn-color-tint-amount));

        color: $real-color if($enable-important-utilities, !important, null);
        background-color: $real-background if($enable-important-utilities, !important, null);
    }
}

ul.pagination {
    display: flex;
    align-items: center;
}

.container-max-sm {
    margin: auto;
    max-width: 540px;
}

.container-max-md {
    margin: auto;
    max-width: 720px;
}

.container-max-lg {
    margin: auto;
    max-width: 960px;
}

.modal-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}

.modal-header {
    padding-bottom: 0;

    h5 {
        margin: auto;
        text-align: center;
    }
}

.modal-footer {
    border: none;
    display: flex;
    padding-top: 0;

    .modal-button {
        display: block;
        flex: 1 0 0;
    }

    @media (max-width: 576px) {
        flex-direction: column;
        align-items: stretch;

        .modal-button {
            flex: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    // #1271: sveltestrap modals are broken when `prefers-reduced-motion` is on
    .modal.fade {
        opacity: 1 !important;
    }

    .modal-backdrop.fade {
        opacity: var(--bs-backdrop-opacity) !important;
    }
}
